import React, { useRef, useState, useEffect } from "react";
import styled from "styled-components";
import { useNavigate, useParams, NavLink } from "react-router-dom";
import { loading, noti, notiError, notiOK, input, alertError, alertOk } from "../../../utils/antd-helper";
import * as suture from "../../../services/suture";
import DCard from "./DCard";
let newName = "";

const Main = ({ className, territoryInfo, reload }) => {
    const navigate = useNavigate();
    const [mySpaceInfo, setMySpaceInfo] = useState({});//我购买的存储空间
    useEffect(() => {
        setMySpaceInfo(territoryInfo);
    }, [territoryInfo]);

    const onRename = () => {
        newName = territoryInfo.name;
        input('Territory Rename', 'new name', 63, newName, (e) => {
            newName = e.target.value;
        }, async (setLoading, close) => {
            try {
                if (!newName) {
                    return notiError("The new name is required");
                }
                if (territoryInfo.name == newName) {
                    return notiError("No change");
                }
                if (window.myTerritories.find(t => t.name == newName)) {
                    return notiError("Duplicate territory name");
                }

                // mySpaceInfo.name = newName;
                // setMySpaceInfo(mySpaceInfo);
                // close();
                // return;

                loading('loading...');
                setLoading(true);
                let ret = await suture.territoryRename(territoryInfo.name, newName);
                if (ret.msg == 'ok') {
                    // alertOk('Rename successfuly.');
                    territoryInfo.name = newName;
                    setMySpaceInfo(territoryInfo);
                    reload();
                    close();
                }
            } catch (e) {
                console.log(e);
            } finally {
                loading();
                setLoading(false);
            }

        })
    }
    const nav = (url) => {
        window.modifyTerritory = territoryInfo;
        navigate(url);
    }


    return (
        <div className={className}>
            <DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/territory.png"} />} title={mySpaceInfo.hash} extra={<font>{mySpaceInfo.name} {mySpaceInfo.state == "Active" && mySpaceInfo.lockedSpace == 0 && mySpaceInfo.usedSpace == 0 && <i title="Rename" onClick={onRename}></i>}</font>}>
                <div className="box">
                    <div className="line-1" title={"Locked Space:"+mySpaceInfo.lockedSpaceStr}>
                        Used {mySpaceInfo.used} /  {mySpaceInfo.total}
                    </div>
                    <div className="line-2">
                        <div><span style={{ width: mySpaceInfo.per+"%" }}></span></div>
                    </div>
                    <div className="line-3">
                        <span>Used</span>
                    </div>
                </div>
                <div className="line-4">
                    {mySpaceInfo.state == 'Active' ? <div>Expire on  {mySpaceInfo.expired}</div> : <div className="red">{mySpaceInfo.state}</div>}
                    {
                        mySpaceInfo.state == 'Active' ?
                            <span onClick={() => nav('/territory/upgrade-' + mySpaceInfo.name)}>Upgrade</span> :
                            mySpaceInfo.state == 'Expired' ?
                                <span onClick={() => nav('/territory/reactive-' + mySpaceInfo.name)}>Reactive</span> :
                                mySpaceInfo.state == 'Frozen' ?
                                    <span onClick={() => nav('/territory/frozen-' + mySpaceInfo.name)}>Upgrade</span> :
                                    mySpaceInfo.state == 'OnConsignment' ?
                                        <span className="disabled">Upgrade</span> :
                                        ""
                    }

                </div>
            </DCard>
        </div>
    );
};

export default React.memo(styled(Main)`    
    transition: all .6s;
    &:hover{
        box-shadow: 0 0 20px 0px #00000059;
    }
    .none{
        display: none;
    }
    .red{
        color:red;
    }
    .box{
        display: flex;
        flex-direction: column;
        padding:0 15px;
        margin-bottom: 15px;
        .line-1{
            width: 100%;
            height:40px;
            line-height: 40px;
            display: block;
            overflow: hidden;
            text-align: right;
        }
        .line-2{
            margin:0px 0 8px;
            div{
                width:100%;
                background-color: rgba(238, 238, 238, 1);
                border-radius: 5px;
                transition: width 5s;
                span{
                    background-color:#0068ff;
                    width:0%;
                    height:20px;
                    display: block;
                    overflow: hidden;
                    border-radius: 5px;
                    transition: width 5s;					
                }
                label{
                    width:0%;
                    height:20px;
                    display: block;
                    overflow: hidden;
                    background-color:rgba(254, 226, 100, 1);
                    border-radius: 5px;
                    transition: width 5s;
                }
            }
        }
        .line-3{
            display: flex;
            flex-direction: row;            
            font-size: 14px;
            label,span{
                display: flex;
                flex-direction: row;
                align-items: center;
                ::before{
                    content: "";
                    width:10px;
                    height:10px;
                    display: inline-block;
                    border-radius: 100%;
                    margin-right:5px;
                }
            }
            label::before{
                background-color:rgba(254, 226, 100, 1);
            }
            span{
                margin-right:30px;				
            }
            span::before{
                background-color:#0068ff;
            }
            div{
                flex:1;
                text-align: right;
            }
        }
    }
    .line-4{
        display: flex;
        justify-content: space-between;
        height:60px;
        line-height: 60px;
        align-items: center;
        border-top: 1px solid #dbdbdb;
        padding:0 15px;
        span{
            width: 90px;
            height: 30px;
            background-color: #333;
            display: block;
            text-align: center;
            line-height: 30px;
            color: #fbfbfb;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            &:hover{
                background-color: #666;
                color:#fff;
            }
        }
        .disabled{
            background-color: #dbdbdb!important;
            cursor: not-allowed;
        }
    }
`);
